.calendar-wrapper {
  @apply flex flex-col justify-between divide-y dark:divide-gray-700 relative;
  /* height: calc(100vh - 153px); */
  height: 800px;
}

.week-view.calendar-wrapper {
  height: calc(100vh - 181px);
}

.calendar-week {
  @apply grid grid-cols-7 h-full divide-x dark:divide-gray-700;
}

.calendar-day {
  @apply relative text-gray-400 text-sm;
  @apply overflow-y-auto h-[160px];
}

.calendar-day.in-month {
  @apply bg-white dark:bg-gray-800;
  @apply dark:hover:bg-gray-800/50 hover:bg-gray-50;
}

.week-view .calendar-day {
  height: calc(100vh - 183px);
}

.calendar-day .day-display {
  @apply sticky top-1 left-1 w-7 h-7 p-1 rounded-md text-center;
  @apply backdrop-blur-sm bg-gray-50/40 dark:bg-gray-700/40;
  @apply dark:text-gray-500 z-10;
}

.week-view .day-display {
  @apply hidden;
}

.calendar-create-task {
  @apply absolute cursor-pointer hover:text-gray-600 w-6 h-6 p-1 rounded-md hover:bg-gray-200 text-center bottom-1 right-1 opacity-0 transition-all;
  @apply dark:hover:bg-gray-900 dark:text-gray-400;
}

.calendar-day:hover .calendar-create-task {
  @apply opacity-100;
}

.calendar-day.today .day-display {
  @apply text-indigo-500 bg-indigo-100 font-bold;
  @apply dark:text-indigo-900 dark:bg-indigo-400;
}

.calendar-month-tasks {
  @apply pt-4 pb-3 flex flex-col gap-2;
}

.calendar-task-item {
  @apply relative overflow-hidden;
  @apply text-gray-500 mx-2 rounded-md bg-white border shadow-sm text-sm px-2 py-1;
  @apply dark:bg-gray-900 dark:border-gray-700 transition-all;
  @apply active:scale-95;
}

.calendar-task-item .no-name .selected-member-name {
  @apply hidden;
}

.overdue-task {
  @apply text-red-500;
}

.week-view .calendar-task-item {
  @apply whitespace-pre-wrap;
}

/* Copy from /components/calendar/style.css - considers to remove one of them */
.calendar-container {
  @apply flex flex-col justify-between divide-y dark:divide-gray-700 relative;
  @apply border bg-white rounded-md shadow-lg shadow-indigo-100;
  @apply dark:bg-gray-900 dark:border-gray-700 dark:shadow-gray-900;
}

.cal-header-day {
  @apply px-3 py-1 text-sm text-gray-700 dark:text-gray-500;
}

.cal-week {
  @apply grid grid-cols-7 h-full divide-x dark:divide-gray-700 dark:text-gray-400;
}

.cal-day {
  @apply absolute top-1 left-2;
}

.cal-day-in-week {
  @apply bg-white dark:bg-gray-900 relative;
  @apply text-xs text-gray-600 dark:text-gray-400;
}

.cal-day-in-week.today .cal-day {
  @apply text-indigo-500 font-bold;
}

.cal-day-in-week.is-sunsat {
  @apply bg-gray-50 dark:bg-black/40;
}

.cal-day-in-week.not-in-month {
  @apply bg-indigo-50/50 text-gray-400;
  @apply dark:bg-gray-800;
}
/* Copy from components/calendar/style.css */
